<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t; read: 'auth'">
  <form
    #form="ngForm"
    [formGroup]="signUpForm"
    (ngSubmit)="onSubmit()"
    data-test="signup-form">
    <tg-ui-input
      class="input-fullname"
      [label]="t('signup.full_name')">
      <input
        formControlName="fullName"
        data-test="signup-fullname"
        maxlength="50"
        inputRef />
      <ng-container inputError>
        <tg-ui-error
          [enabled]="form.submitted"
          data-test="full-name-required-error"
          error="required">
          {{ t('signup.errors.full_name_required') }}
        </tg-ui-error>
      </ng-container>
    </tg-ui-input>

    <tg-ui-context-notification
      *ngIf="fullNameOnlyEmojis && !dismissedEmojiNotification"
      status="warning"
      class="fullname-only-emojis"
      data-test="fullname-only-emojis"
      alertLevel="polite"
      size="s"
      [hasClose]="true"
      (closed)="dismissedEmojiNotification = true">
      <span>
        {{ t('signup.warnings.only_emojis') }}
      </span>
    </tg-ui-context-notification>

    <tg-ui-input
      class="input-email"
      [label]="t('signup.email')">
      <input
        formControlName="email"
        data-test="signup-email"
        inputRef
        [readOnly]="isEmailReadonly" />
      <ng-container inputError>
        <tg-ui-error
          [enabled]="form.submitted"
          data-test="signup-required-email"
          error="required">
          {{ t('signup.errors.email_required') }}
        </tg-ui-error>
        <tg-ui-error
          [enabled]="form.submitted"
          data-test="signup-invalid-email"
          error="email">
          {{ t('signup.errors.invalid_email') }}
        </tg-ui-error>
        <tg-ui-error
          [enabled]="form.submitted"
          data-test="signup-email-exists"
          error="exists">
          {{ t('signup.errors.email_exists') }}
        </tg-ui-error>
      </ng-container>
    </tg-ui-input>

    <tg-ui-input
      #input="tgInput"
      class="input-password"
      [label]="t('signup.password')"
      [accessibleLabel]="t('password.help_weak', { number: 8 })">
      <input
        type="password"
        formControlName="password"
        inputRef
        data-test="signup-password" />

      <ng-container inputError>
        <tg-ui-error
          [enabled]="form.submitted"
          data-test="invalid-password"
          error="required">
          {{ t('signup.errors.password_required') }}
        </tg-ui-error>
      </ng-container>
      <ng-container passwordStrength>
        <tg-ui-password-strength [showErrors]="form.submitted">
        </tg-ui-password-strength>
      </ng-container>
    </tg-ui-input>

    <p
      class="terms-and-privacy"
      data-test="terms-and-privacy"
      withExternalLink
      [innerHtml]="
        t('signup.terms_and_privacy', {
          termsOfService: 'terms-of-service' | getUrl,
          privacyPolicy: 'privacy-policy' | getUrl
        })
      "></p>

    <button
      loading
      [loadingMsg]="t('signup.in_progress')"
      [loadingSuccess]="t('signup.success')"
      class="create-account"
      data-test="signup-submit-button"
      appearance="primary"
      tuiButton
      type="submit">
      {{ t('signup.create_account') }}
    </button>
    <button
      class="auth-options"
      (click)="viewAllOptions()"
      *ngIf="!invitation.project || !invitation.email"
      appearance="primary"
      tuiLink
      icon="chevron-left"
      iconAlign="left"
      type="button">
      {{ t('signup.all_options') }}
    </button>
  </form>
</ng-container>
